<template>
	<div class="index-bg">
		<div class="w-full h-[190px] box-border p-[30px] bg-gradient-to-r from-[#00aaff] to-[#0086ff]">
			<div class="iconfont icon-huiyuan icon">云南大学(呈贡校区)</div>
			<div class="w-[690px] h-[68px] mt-[22px] bg-white">
				<div class="iconfont icon-sousuo icon2">搜索饿了么商家、商品名称</div>
			</div>
		</div>
		<div class="w-full h-[320px] grid grid-cols-5 grid-gap-5 box-border pt-[15px]">
			<div v-for="item in gridList" class="w-[150px] h-[130px] flex flex-col
			 items-center justify-between text-center">
				<img class="w-[90px] h-[90px]" :src="item.imgSrc" />
				<div class="text-[24px]">{{ item.title }}</div>
			</div>
		</div>
		<div class="mt-[40px] mx-[30px] p-[25px] w-[690px] h-[210px] flex flex-row justify-between items-center bg-gradient-to-r from-[#fafafa] to-[#f4f4f4]">
			<div>
				<div class="font-bold text-[34px]">品质套餐</div>
				<div class="text-[26px]">搭配齐全吃得好</div>
				<div class="text-[24px] py-[10px] box-border text-[#AF8260]">立即抢购 ></div>
			</div>
			<img class="w-[280px] h-[190px] font-bold" :src="t1_g2_i1" alt="" />
		</div>
		<div class="shop">推荐商家</div>
		<div class="bg-[#f5f5f5] w-full box-border py-[20px]">
			<div v-for="i in 10" @click="Nav.navToPage('Shop')" class="w-[700px] h-[248px] p-[20px] box-border bg-white rounded-[20px] overflow-hidden m-[25px] mt-0 flex flex-row items-center justify-around">
				<img class="w-[208px] h-[208px] rounded-[20px] mr-[10px]" :src="t1_g3_i1" alt="" />
				<div class="w-[428px] h-[208px] bg-white">
					<div class="flex flex-row items-center">
						<img class="w-[68px] h-[28px] mr-[10px]" :src="hongbao" alt="" />
						<div class="w-[320px] text-[32px] font-bold text-ellipsis whitespace-nowrap overflow-hidden">芝根芝底.意面.披萨(版筑翠园店)</div>
					</div>
					<div class="flex flex-row items-center">
						<div class="text-[#FF6300] text-[28px] font-bold">4.8分</div>
						<div class="text-[24px] text-[#666666] ml-[16px]">月售800+</div>
						<div class="w-[100px]"></div>
						<div class="text-[#666666] text-[24px]">46分钟</div>
						<div class="text-[24px] text-[#666666] ml-[16px]">4km</div>
					</div>
					<div class="flex flex-row items-center">
						<div class="text-[#666666] text-[24px] mr-[16px]">起送￥20</div>
						<div class="text-[#FF770B] text-[24px] mr-[16px]">免配送费</div>
						<div class="text-[#666666] text-[24px] mr-[16px] line-through">￥3</div>
					</div>
					<div class="flex flex-row items-center bg-[#fef0e5] w-fit h-[40px] box-border rounded-[10px] my-[4px]">
						<img class="w-[40px] h-[40px]" :src="dianzan" alt="" />
						<div class="text-[24px] text-[#FE7100] px-[10px]">商家回复快</div>
					</div>
					<div class="flex flex-row items-center">
						<div class="text-[#FF4B33] h-[32px] leading-[32px] text-[22px] px-[10px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">6减3</div>
						<div class="text-[#FF4B33] h-[32px] leading-[32px] text-[22px] px-[10px] border-2 border-solid border-[#FF4B33] rounded-[10px] mr-[10px]">35减8</div>
						<div class="flex flex-row items-center border-2 border-solid border-[#AE6C28] rounded-[10px] px-[8px]">
							<img class="w-[18px] h-[18px]" :src="huangguan" alt="" />
							<div class="text-[#AE6C28] text-[22px] pl-[8px]">4元无门槛</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import huangguan from '@/assets/images/huangguan.webp';
	import hongbao from '@/assets/images/hongbao.png';
	import dianzan from '@/assets/images/dianzan.png';
	import t1_g3_i1 from '@/assets/images/t1_g3_i1.webp';
	import t1_g2_i1 from '@/assets/images/t1_g2_i1.webp';
	import t1_g1_i1 from '@/assets/images/t1_g1_i1.webp';
	import t1_g1_i2 from '@/assets/images/t1_g1_i2.webp';
	import t1_g1_i3 from '@/assets/images/t1_g1_i3.webp';
	import t1_g1_i4 from '@/assets/images/t1_g1_i4.webp';
	import t1_g1_i5 from '@/assets/images/t1_g1_i5.webp';
	import t1_g1_i6 from '@/assets/images/t1_g1_i6.webp';
	import t1_g1_i7 from '@/assets/images/t1_g1_i7.webp';
	import t1_g1_i8 from '@/assets/images/t1_g1_i8.webp';
	import t1_g1_i9 from '@/assets/images/t1_g1_i9.webp';
	import t1_g1_i10 from '@/assets/images/t1_g1_i10.webp';
	import { Nav } from '@/main';
	const gridList = [
		{
			title: '美食',
			imgSrc: t1_g1_i1,
		},
		{
			title: '商超便利',
			imgSrc: t1_g1_i2,
		},
		{
			title: '水果',
			imgSrc: t1_g1_i3,
		},
		{
			title: '送药上门',
			imgSrc: t1_g1_i4,
		},
		{
			title: '买菜',
			imgSrc: t1_g1_i5,
		},
		{
			title: '汉堡披萨',
			imgSrc: t1_g1_i6,
		},
		{
			title: '麻辣烫',
			imgSrc: t1_g1_i7,
		},
		{
			title: '地方小吃',
			imgSrc: t1_g1_i8,
		},
		{
			title: '鲜花绿植',
			imgSrc: t1_g1_i9,
		},
		{
			title: '地方美食',
			imgSrc: t1_g1_i10,
		},
	];
</script>
<style scoped>
	.icon {
		color: white;
		font-weight: bold;
		font-size: 35px;
	}
	.icon2 {
		color: #999;
		text-align: center;
		line-height: 68px;
		font-size: 28px;
		font-weight: lighter;
		letter-spacing: 3px;
		vertical-align: text-bottom;
	}
	.shop {
		position: relative;
		width: 250px;
		text-align: center;
		font-size: 30px;
		line-height: 80px;
		height: 80px;
		box-sizing: border-box;
		margin-left: 250px;
		margin-top: 10px;
	}
	.shop::before {
		content: '';
		width: 40px;
		height: 0.5px;
		background-color: #999;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.shop::after {
		content: '';
		width: 40px;
		height: 0.5px;
		background-color: #999;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
